<template>
	<view class="content">
		<!-- 页面内容 -->
		<view class="ranking" v-if="!showError">
			<view class="header">
				本月镇北消费制霸榜
			</view>
			<!-- 轮播图 -->
			<uni-swiper-dot @clickItem=clickItem :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" :current="current">
					<swiper-item v-for="(item, index) in info" :key="index">
						<image class="swiper-item-img" :src="item.url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<scroll-view class="scroll-view-other" scroll-y="true" @scrolltolower="loadMore" style="height:60%">
				<view class="other">
					<view class="u-th">
						<view class="index_box">
							名次
						</view>
						<view class="user_box">
							用户
						</view>
						<view class="cumulative">
							消费金额
						</view>
						<view class="prize_box">
							可得奖品
						</view>
					</view>
					<!-- 使用 v-for 渲染其他数据 -->
					<view v-if="list.length > 0">
						<view v-for="(item, index) in list" :key="index" class="otherone">
							<view class="index_box">
								<span>{{ index + 1 }}</span>
							</view>
							<view class="user_box" style="margin-top:20rpx">
								<image :src="item.headimg" mode=""></image>
								<div class="user_name">{{ item.name }}</div>
							</view>
							<view class="cumulative">
								<span>{{ item.value }}</span>
							</view>
							<view class="prize_box">
								<image :src="item.detailImages" mode=""></image>
							</view>
						</view>
					</view>
					<view v-else>
						<NoData></NoData>
						<!-- <view>暂无排行榜信息</view> -->
					</view>


				</view>
			</scroll-view>
			<view v-if="userItem">
				<view class="footer" v-if="userItem.rank">
					您的当前排名：{{ userItem.rank }}(本月累计消费：{{ userItem.value }}元)
				</view>
			</view>
			
		</view>

		<!-- 错误信息 -->
		<view v-else style="width: 100%; height: 400rpx;text-align: center;margin-top: 400rpx;">
			<NoData></NoData>
		</view>
	</view>
</template>


<script>
import {
	rankin
} from "@/api/blind.js"
export default {
	data() {
		return {
			list: [],
			showError: false, // 标记是否显示错误信息
			currentPage: 1, // 当前页码
			size: 15, // 每页数量
			hasMore: true, // 是否还有更多数据
			rankingNum: 9, // 排名
			consumptionAmount: 2940.00, // 累计消费
			info: [],
			current: 0,
			autoPlayInterval: null, // 用于存储定时器的变量
			mode: 'dot',
		};
	},
	onLoad() { },
	computed: {
		userInfo() {
			return this.$store.getters.userInfo
		}
	},
	mounted() {
		this.loadData(); // 初始化页面时加载数据
		this.getUserConsumptionById();
		this.selectAll();
		// 在页面显示时启动自动播放
		this.startAutoPlay();
		// 监听页面滚动事件
		// uni.$on('scroll', (event) => {
		// 	console.log(event);
		// 	// 如果滚动到页面底部且有更多数据，则加载下一页
		// 	if (event.direction.y === -1 && event.scrollTop + event.clientHeight >= event.scrollHeight && this
		// 		.hasMore) {
		// 		this.loadMore();
		// 	}
		// });
	},
	onHide() {
		// 在页面隐藏时清除定时器
		this.stopAutoPlay();
	},
	methods: {
		// loadMore() {
		// 	this.currentPage++;
		// 	this.loadData(this.currentPage);
		// },
		change(e) {
			this.current = e.detail.current;
		},
		clickItem(e) {
			this.swiperDotIndex = e
		},
		// 启动自动播放
		startAutoPlay() {
			this.autoPlayInterval = setInterval(() => {
				// 每隔一定时间切换到下一个轮播图
				this.current = (this.current + 1) % this.info.length;
			}, 3000); // 3000毫秒（3秒）为轮播间隔，可以根据需求调整
		},
		// 停止自动播放
		stopAutoPlay() {
			if (this.autoPlayInterval) {
				clearInterval(this.autoPlayInterval);
				this.autoPlayInterval = null;
			}
		},
		selectAll() {
			this.$http('/activity-img/selectAll/2', 'GET').then(res => {
				this.info = res.data.data.list
			})
		},
		returnAct() {
			uni.navigateTo({
				url: "/pages/center/assignment"
			})
		},
		loadData() {
			this.$http("/rankinglist/selectRankingListSkuId", "get").then(res => {
				if (res.code == 200) {
					let list = res.data
					this.$http("/rankinglist/selectRankingListSkuName", "get").then(result => {
						if (result.code == 200) {
							// let list = res.data.info
							let item = result.data.info.awardsInfo
							// 遍历排行榜上每个人员的信息
							list.forEach((person, index) => {
								// 假设 awardsInfo 中的奖品信息是按名次排序的，可以根据 index 来获取对应名次的奖品信息
								if (index < item.length) {
									let award = item[index];
									// 将对应名次的奖品信息中的图片赋值给当前 person 的 detailImages 属性
									person.detailImages = award.detailImages;
								}
							});
							this.list = list
						}
					})
				}
			})
		},
		// 排名以及消费金额
		getUserConsumptionById() {
			this.$http(`/rankinglist/getUserConsumptionById/${this.userInfo.id}`, "get").then(res => {
				if (res.code == 200) {
					this.userItem = res.data.info
				}
			})
		}
	},
};
</script>

<style scoped>
.content {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.rules {
	width: 130rpx;
	height: 70rpx;
	background-image: url(../../static/fontSize.png);
	background-size: 100%;
	background-repeat: no-repeat;
	position: fixed;
	right: 0;
	top: 400rpx;
	text-align: center;
	line-height: 70rpx;
	border-radius: 40rpx 0 0 40rpx;
	font-size: 25rpx;
}

.ranking {
	height: 100%;
	overflow: hidden;
	/* 	display: flex;
		flex-direction: column; */
}

.scroll-view-other {
	flex: 1;
	margin-top: 20rpx;
}

.swiper-box {
	height: 350rpx;
	width: 90%;
	margin: 20rpx auto 0;
	border-radius: 15rpx;
	overflow: hidden;

	image {
		width: 100%;
		height: 100%;
	}
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	margin-top: 100rpx;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 200px;
	color: #fff;
}

.header {
	height: 80rpx;
	line-height: 80rpx;
	background-color: #273260;
	color: #fff;
	padding: 0 36rpx;
}

.other {
	/* padding: 0 32rpx; */
}

.otherone {
	display: flex;
	align-items: center;
	border-bottom: 2rpx solid #cecece;
	padding-bottom: 10rpx;
}

.u-th {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 36rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	color: #fff;
	background-color: #273260;
	z-index: 99;
}

.index_box {
	width: 100rpx;
	text-align: center;
}

.user_box {
	flex: 1;
}

.cumulative {
	width: 200rpx;
}

.prize_box {
	width: 160rpx;
}

.user_box>image {
	display: inline-block;
	width: 85rpx;
	height: 85rpx;
	border-radius: 8rpx;
	vertical-align: middle;
	margin-right: 20rpx;
}

.prize_box>image {
	display: inline-block;
	width: 100rpx;
	height: 100rpx;
	border-radius: 8rpx;
}

.footer {
	height: 80rpx;
	line-height: 80rpx;
	background-color: #273260;
	color: #fff;
	text-align: center;
	position: fixed;
	bottom: 0;
	width: 100%;
}
</style>